<template>
  <el-dialog
    :title="$t('message.spkctz')"
    :visible.sync="visible"
    width="60%"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    :before-close="close"
  >
    <el-form
      ref="formRef"
      :model="formData"
      label-width="auto"
      :rules="rules"
    >
      <el-form-item
        :label="$t('message.crk')"
        prop="type"
      >
        <el-radio-group v-model="formData.type">
          <el-radio
            v-for="i in inventoryEnum"
            :key="i.value"
            :label="i.value"
          >
            {{ i.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="formData.type == 0"
        :label="timeLabel"
        prop="inoutTime1"
      >
        <el-date-picker
          v-model="formData.inoutTime1"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          :placeholder="$t('message.qxz') + timeLabel"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item
        v-else
        :label="timeLabel"
        prop="inoutTime2"
      >
        <el-date-picker
          v-model="formData.inoutTime2"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          :placeholder="$t('message.qxz') + timeLabel"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item
        v-if="formData.type == 0"
        :label="sortLabel"
        prop="typeId1"
      >
        <el-select
          v-model="formData.typeId1"
          :placeholder="$t('message.qxz') + sortLabel"
        >
          <el-option
            v-for="i in inoutType1"
            :key="i.id"
            :label="i.name"
            :value="i.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-else
        :label="sortLabel"
        prop="typeId2"
      >
        <el-select
          v-model="formData.typeId2"
          :placeholder="$t('message.qxz') + sortLabel"
        >
          <el-option
            v-for="i in inoutType2"
            :key="i.id"
            :label="i.name"
            :value="i.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        :label="$t('message.bz')"
        prop="notes"
      >
        <el-input
          v-model="formData.notes"
          :placeholder="$t('message.qsr') + $t('message.bz')"
          type="textarea"
          maxlength="200"
        />
      </el-form-item>
      <el-form-item :label="goodsLabel">
        <goods
          v-if="formData.type == 0"
          :goodsList="{ items: goodsList1 }"
          ref="goodsRef"
        />
        <goods
          v-else
          :goodsList="{ items: goodsList2 }"
          ref="goodsRef"
        />
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        v-preventReClick
        @click="close"
      >
        {{ $t('message.qx') }}
      </el-button>
      <el-button
        v-preventReClick
        type="primary"
        @click="submit"
      >
        {{ $t('message.qr') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import store from '@/store';
import goods from './goods.vue';
import { inoutTypeList, inoutStorageAdd } from '@/api';
import dayjs from 'dayjs';

export default {
  components: {
    goods,
  },
  data() {
    return {
      visible: false,
      modalDialog: store.getters.dialog,
      inventoryEnum: [
        {
          label: this.$t('message.rk'),
          value: 0,
        },
        {
          label: this.$t('message.ck'),
          value: 1,
        },
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > new Date(new Date().toLocaleDateString()).getTime();
        },
      },
      formData: {
        type: 0,
        inoutTime: new Date(),
      },
      inoutType1: [],
      inoutType2: [],
      goodsList1: [],
      goodsList2: [],
      rules: {
        type: [
          {
            required: true,
            message: this.$t('message.qxz') + this.$t('message.crk'),
            trigger: 'blur',
          },
        ],
        inoutTime1: [
          {
            required: true,
            message: this.$t('message.qxz') + this.$t('message.rksj'),
            trigger: 'blur',
          },
        ],
        inoutTime2: [
          {
            required: true,
            message: this.$t('message.qxz') + this.$t('message.cksj'),
            trigger: 'blur',
          },
        ],
        typeId1: [
          {
            required: true,
            message: this.$t('message.qsr') + this.$t('message.rklx'),
            trigger: 'blur',
          },
        ],
        typeId2: [
          {
            required: true,
            message: this.$t('message.qsr') + this.$t('message.cklx'),
            trigger: 'blur',
          },
        ],
      },
    };
  },
  computed: {
    timeLabel() {
      return this.formData.type == 0 ? this.$t('message.rksj') : this.$t('message.cksj');
    },
    sortLabel() {
      return this.formData.type == 0 ? this.$t('message.rklx') : this.$t('message.cklx');
    },
    goodsLabel() {
      return this.formData.type == 0 ? this.$t('message.rksp') : this.$t('message.cksp');
    },
  },
  methods: {
    open(goods) {
      this.visible = true;
      goods.forEach((i) => {
        i.goodsClassifyName = i.classifyName;
        i.goodName = i.name;
        i.goodId = i.id;
      });
      this.goodsList1 = JSON.parse(JSON.stringify(goods));
      this.goodsList2 = JSON.parse(JSON.stringify(goods));
      this.formData = {
        type: 0,
        inoutTime1: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        inoutTime2: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        notes: '',
      };
      inoutTypeList({ param: { type: '0' } }).then((res) => {
        this.inoutType1 = res.recordList;
      });
      inoutTypeList({ param: { type: '1' } }).then((res) => {
        this.inoutType2 = res.recordList;
      });
    },
    submit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.formData);
          this.$refs.goodsRef
            .validateForm()
            .then((res) => {
              console.log('[ res1 ] >', res);
              this.$confirm(this.formData.type === 0 ? '是否确认入库?' : '是否确认出库?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              })
                .then(async () => {
                  const param = {
                    ...this.formData,
                    typeId: this.formData.type == 0 ? this.formData.typeId1 : this.formData.typeId2,
                    inoutTime: this.formData.type == 0 ? this.formData.inoutTime1 : this.formData.inoutTime2,
                    goods: res.items,
                  };
                  await inoutStorageAdd({ param });
                  this.$message.success('保存成功');
                  this.visible = false;
                  this.$emit('success');
                })
                .catch(() => {});
            })
            .catch((err) => {
              console.log('[ err ] >', err);
            });
        }
      });
    },
    close() {
      this.$refs.formRef.resetFields();
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
